.theme-blue {
  $color:#ABB2C6;
  $font_color:#333;
  $top_is_active_color:#fff;
  $sidebar_is_active_color:#4285F4;
  .avue-header{
    background-color: #0A1533;
  }
  .avue-sidebar{
    background-color: #2A3550;
    .el-submenu .el-menu {
      background-color: #3E4760 !important;
    }
  }
  .avue-logo{
    background-color: #0A1533;
  }
  .el-dropdown{
    color: $color;
  }
  .avue-logo{
    .avue-logo_title{
      color: #fff;
    }
  }
  .avue-breadcrumb{
    i{
      color: $color;
    }
  }
  .el-menu--vertical{
    .el-menu-item:focus, .el-menu-item:hover {
      outline: 0;
      background-color: $sidebar_is_active_color;
    }
  }
  
  .avue-sidebar{
    .el-menu-item{
      &.is-active {
        background: #4285F4;
        &:before {
          background: $color;
        }
        i,span{
          color: $top_is_active_color;
        }
        &:hover {
          i,span {
            color:$top_is_active_color;
          }
        }
      }
      &:hover {
        i,span {
          color:$sidebar_is_active_color;
        }
      }
    }
    .el-submenu .el-menu-item{
      &:hover {
        background: #4285F4;
        i,span {
          color:$top_is_active_color;
        }
      }
    }
    .el-submenu__title{
      &:hover {
        i,span {
          color:$sidebar_is_active_color;
        }
      }
    }
  }
  .avue-tags{
    .el-tabs__item{
      color: $font_color !important;
      &.is-active{
        color: $sidebar_is_active_color !important;
        border-color: $sidebar_is_active_color !important;
      }
      &:before{
        background: $top_is_active_color;
      }
    } 
  }
  .top-search {
    .el-input__inner{
      color: $color;
    }
    input::-webkit-input-placeholder,
    textarea::-webkit-input-placeholder {
        /* WebKit browsers */
        color: $color;
    }
    input:-moz-placeholder,
    textarea:-moz-placeholder {
        /* Mozilla Firefox 4 to 18 */
        color: $color;
    }
    input::-moz-placeholder,
    textarea::-moz-placeholder {
        /* Mozilla Firefox 19+ */
        color: $color;
    }
    input:-ms-input-placeholder,
    textarea:-ms-input-placeholder {
        /* Internet Explorer 10+ */
        color: $color;
    }
}
  .top-bar__item {
    i {
      color: $color;
    }
  }
  .avue-top{
    .el-menu-item.is-active{
      color: $top_is_active_color;
      i,span{
          color: $top_is_active_color!important;
      }
    }
    .el-menu-item.is-active:after{
        background-color: $top_is_active_color;
    }
    .el-menu-item {
        i,
        span {
          color: $color;
        }
      &:hover {
          i,
          span {
            color:$top_is_active_color;
          }
      }
    }
  }
}